<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜品管理</title>
    <link rel="stylesheet" href="/plugin/bootstrap/css/bootstrap.min.css">
    <script src="/plugin/jquery-3.7.1.min.js"></script>
    <script src="/plugin/adminlte/js/popper.min.js"></script>
    <script src="/plugin/bootstrap/js/bootstrap.min.js"></script>
    <script src="/plugin/axios.min.js"></script>
</head>
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary app-loaded sidebar-open"
      onload="grabDataFromServer(1)">
<main class="app-main">
    <div th:replace="/admin/fragments/common :: appContentHeader('菜品管理')"></div>
    <div class="app-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-auto">
                    <label for="foodname" class="visually-hidden">菜品名称</label>
                    <input type="text" class="form-control" id="foodname" placeholder="菜品名称">
                </div>
                <div class="col-auto">
                    <label for="lowPrice" class="visually-hidden">最低价</label>
                    <input type="text" class="form-control" id="lowPrice" placeholder="最低价">
                </div>
                <div class="col-auto">
                    <label for="hiPrice" class="visually-hidden">最高价</label>
                    <input type="text" class="form-control" id="hiPrice" placeholder="最高价">
                </div>
                <div class="col-auto">
                    <button type="button" class="btn btn-primary mb-3" onclick="grabDataFromServer(1)">查询</button>
                </div>
            </div>
            <table id="data_table" class="table table-striped">
                <!--此处填充数据-->
            </table>
            <ul class="pagination" id="pager">
                <!-- 此处填充分页数据 -->
            </ul>
        </div>
    </div>
</main>
<script>
    function grabDataFromServer(page) {
        axios.get("/api/admin/foodsList", {
            params: {
                foodname: document.getElementById('foodname').value,
                lowPrice: document.getElementById('lowPrice').value,
                hiPrice: document.getElementById('hiPrice').value,
                page: page,
                size: 10
            }
        }).then(res => {
            bindTableData(res); // 绑定表格数据
            bindPager(res); // 绑定分页控件
        })
    }

    function bindTableData(res) {
        let html = `
                    <tr>
                        <th>菜品名称</th>
                        <th>菜品图片</th>
                        <th>价格</th>
                        <th>操作</th>
                    </tr>
                `;
        let foods = res.data.records;
        for (let x in foods) {
            let o = foods[x];
            html += `
                        <tr>
                        <td>${o.foodname}</td>
                        <td><img src="${o.photo}" alt="美味" style="width:100px;height:100px"></td>
                        <td>${o.price}</td>
                        <td><a href="/admin/food?id=${o.foodname}">修改</a></td>
                    </tr>
                    `;
        }
        document.getElementById("data_table").innerHTML = html;
    }

    function bindPager(res) {
        const totalPages = res.data.pages;
        const current = res.data.current;
        let pager_html = '';
        for (let i = 1; i <= totalPages; i++) {
            if (i === current) {
                pager_html += '<li class="page-item active">';
            } else {
                pager_html += '<li class="page-item">';
            }
            pager_html += `<a class="page-link" href="javascript:void(0)" onclick="grabDataFromServer(${i})">${i}</a></li>`;
        }
        document.getElementById("pager").innerHTML = pager_html;
    }
</script>
</body>
</html>